<template>
    <div id="page-my-order">
        <div class="page-title">
            位置：我的订单
        </div>

        <div class="table-wrap">
            <table id="order-list">
                <thead>
                    <tr>
                        <td>下单时间</td>
                        <td>订单描述</td>
                        <td>订单金额</td>
                        <td>订单状态</td>
                        <td>订单详情</td>
                    </tr>
                </thead>
                <tbody v-loading="loading"
                       element-loading-text="拼命加载中...">
                    <tr v-for="item in orderList" :key="item.id">
                        <td>{{item.orderCreateTime}}</td>
                        <td>{{item.orderDescribe}}</td>
                        <td>{{(item.cashFee/100).toFixed(2)}}</td>
                        <td>{{item.orderPayStatus==1?'已支付':item.orderPayStatus==2?'已失效':item.orderPayStatus==3?'部分支付':'未支付'}}</td>
                        <td>
                            <span @click="goOrderDetail(item.orderId,item.orderPayStatus)">详情</span><span @click="cancelOrder(item.orderId)" v-if="item.orderPayStatus==0"> | 取消</span>
                        </td>
                    </tr>
                    <tr v-if="orderList.length==0">
                        <td colspan="5">暂无订单！</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <dialog-box
                v-if="dialogBoxShow"
                sign-text="将不再保存订单数据，是否取消？"
                cancel-text="再想想"
                confirm-text="取消订单"
                :show-close="false"
                @closeDialogBox="closeDialogBox"
        >
        </dialog-box>
    </div>
</template>

<script>

    export default {
        data(){
            return {
                loading:true,
                dialogBoxShow:false,
                orderList:[],
                preCancelSubscribeId:'',
                subscriberName:''
            }
        },
        methods:{
            goOrderDetail(id,orderPayStatus){
                if(orderPayStatus==0){
                    this.$router.push({
                        name:'personal-order',
                        query:{
                            orderId:id
                        }
                    });
                }else {
                    this.$router.push({
                        name:'personal-order-detail',
                        query:{
                            id
                        }
                    });
                }

            },
            cancelOrder(id){
                this.preCancelSubscribeId = id;
                // this.$store.commit('changeDialogBoxShow',true);
                this.dialogBoxShow = true;
            },
            closeDialogBox(res){
                if(res.close){
                    console.log('点击关闭按钮');
                } else if(res.cancel){
                    console.log('点击取消');
                    this.$message({
                        type: 'info',
                        message: '已取消本次操作！'
                    });
                }else {
                    console.log('点击确定');
                    this.$request.cancelSubscriber({
                        orderId:this.preCancelSubscribeId
                    }).then(res=>{
                        console.log(res);
                        if(res.status==200){
                            this.$message({
                                type: 'success',
                                message: '操作成功，订单已取消！'
                            });
                            this.requestOrderList();
                        }else {
                            this.requestError(res.status,res.message);
                        }

                    },err=>{
                        console.log(err);
                        this.requestFail(err);
                    })
                }
                this.dialogBoxShow = false;
            },
            requestOrderList(){
                this.$request.myOrderList({
                    size: 1000
                }).then(res=>{
                    console.log(res);
                    this.loading = false;
                    if(res.status==200){
                        if(res.data){
                            this.orderList = res.data.appOrders||[];
                            this.subscriberName = res.data.name;
                        }else {
                            this.orderList = [];
                        }
                    }else {
                        this.requestError(res.status,res.message);
                    }
                },err=>{
                    this.loading = false;
                    console.log(err);
                    this.requestFail(err);
                })
            }
        },
        mounted() {
            this.requestOrderList();
        },
    }
</script>

<style scoped lang="less">
    #page-my-order{
        @moudle-bg-color:#ffffff;
        @under-line:1px solid #F5F5FB;
        font-family:'Microsoft YaHei','微软雅黑';
        .color(#090909);

        .table-wrap{
            .width(100%);
            padding: 20px;
            background-color: @moudle-bg-color;
            margin-top: 11px;

            #order-list{
                .width(100%);
                table-layout:fixed;
                .color(#67717D);
                .lh(47px);
                .fz(16px);
                text-align: center;
                border: 1px solid #E4E4E4;

                thead{
                    background-color: #F7F7F7;
                    font-weight: bold;
                }
                tbody{
                    td:nth-of-type(2){
                        .min-width(330px);
                        /*text-align: left;*/
                    }
                    td:nth-of-type(5){
                        .color(#418EC6);
                        span{
                            cursor: pointer;
                        }
                    }
                }
                tr{
                    border-top: 1px solid #E4E4E4;
                    td{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        &:nth-of-type(1){
                            width: 22%;
                        }
                        &:nth-of-type(2){
                            width: 40%;
                        }
                    }
                }

            }
        }

    }

</style>